<template>
  <div class="app-container">
    <div class="table-box">
      <!-- 按钮功能区 开始 -->
      <el-row :gutter="10" class="btn-box">
        <el-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="24"
          class="btnfunction-section-col"
        >
          <el-button type="primary" icon="el-icon-edit" @click="handleAdd()">{{
            $t('common.create')
          }}</el-button>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-plus"
              :title="$t('common.toggle_on')"
              @click="handleArrowDown()"
            />
            <el-button
              type="primary"
              icon="el-icon-minus"
              :title="$t('common.toggle_off')"
              @click="handleArrowUp()"
            />
          </el-button-group>
          <el-button type="primary" @click="handleUpdateSort()">{{
            $t('common.updateSort')
          }}</el-button>
        </el-col>
      </el-row>
      <!-- 按钮功能区 结束 -->

      <!-- Note that row-key is necessary to get a correct row order.   table当前行高亮属性highlight-current-row-->
      <el-table
        ref="treeTable"
        v-loading="listLoading"
        :data="list"
        row-key="id"
        border
        fit
        highlight-current-row
        style="width: 100%"
        :indent="16"
      >
        <el-table-column
          align="center"
          label="ID"
          type=""
          width="110"
        >
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="left"
          :label="$t('menu.name')"
          class-name="menuIcon"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('menu.type')"
          min-width="100px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.type_label }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('menu.route_icon')"
          min-width="80px"
        >
          <template slot-scope="{ row }">
            <span><jsp-icon :icon="row.route_icon" /></span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('menu.route_name')"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.route_name }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('menu.route_path')"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.route_path }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          :label="$t('menu.route_component')"
          min-width="150px"
        >
          <template slot-scope="{ row }">
            <span>{{ row.route_component }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="200px">
          <template slot="header">
            <span> {{ $t('menu.permission') }} </span>
            <el-tooltip class="item" effect="dark" placement="right">
              <div
                slot="content"
                v-html="$t('menu.table_header_permission_tips')"
              />
              <i class="awesome-icon fas fa-question-circle" />
            </el-tooltip>
          </template>
          <template slot-scope="{ row }">
            <span class="link-type" @click="clipboard(row.permission, $event)">{{
              row.permission
            }}</span>
          </template>
        </el-table-column>

        <el-table-column width="250" :label="$t('common.sort')" align="center">
          <template slot-scope="{ row }">
            <el-input-number
              v-model="row.sort"
              controls-position="right"
              :min="1"
            />
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.created_at')"
          width="200"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.updated_at')"
          width="200"
          align="center"
        >
          <template slot-scope="{ row }">
            <span>{{ row.created_at }}</span>
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('common.operation')"
          align="center"
          class-name="small-padding fixed-width"
          width="200px"
          fixed="right"
        >
          <template slot-scope="{ row, $index }">
            <span
              class="link-type"
              :title="$t('common.edit')"
              @click="handleEdit(row)"
            >
              <i class="el-icon-edit" />
            </span>&nbsp;
            <span
              v-if="row.status != 'deleted'"
              class="link-type"
              :title="$t('common.delete')"
              @click="handleDelete(row, $index)"
            >
              <i class="el-icon-delete" />
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { fetchList } from '@/api/menu'
import i18n from '@/lang'
import { arrChildrenFlatten } from '@/utils/object'
import clipboard from '@/utils/clipboard'
import JspIcon from '@/components/JspIcon'

export default {
  name: 'MenuIndex',
  components: {
    JspIcon
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      sortable: [],
      oldList: [],
      newList: [],
      menuList: [
        {
          id: 1,
          parent_id: 0,
          name: '一级 1',
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 1,
          icon: '',
          children: [
            {
              id: 4,
              parent_id: 1,
              name: '二级 1-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1,
              icon: '',
              children: [
                {
                  id: 9,
                  parent_id: 4,
                  name: '三级 1-1-1',
                  status: 'published',
                  level: 3,
                  created_at: '2021-5-5 10:20:00',
                  sort: 1,
                  icon: ''
                },
                {
                  id: 10,
                  parent_id: 4,
                  name: '三级 1-1-2',
                  status: 'draft',
                  level: 3,
                  created_at: '2021-5-5 10:20:00',
                  sort: 2,
                  icon: ''
                }
              ]
            }
          ]
        },
        {
          id: 2,
          parent_id: 0,
          name: '一级 2',
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 2,
          icon: '',
          children: [
            {
              id: 5,
              parent_id: 2,
              name: '二级 2-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1,
              icon: ''
            },
            {
              id: 6,
              parent_id: 2,
              name: '二级 2-2',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 2,
              icon: ''
            }
          ]
        },
        {
          id: 3,
          name: '一级 3',
          parent_id: 0,
          status: 'published',
          level: 1,
          created_at: '2021-5-5 10:20:00',
          sort: 3,
          icon: '',
          children: [
            {
              id: 7,
              parent_id: 3,
              name: '二级 3-1',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 1,
              icon: ''
            },
            {
              id: 8,
              parent_id: 3,
              name: '二级 3-2',
              status: 'published',
              level: 2,
              created_at: '2021-5-5 10:20:00',
              sort: 2,
              icon: ''
            }
          ]
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    clipboard,
    async getList() {
      this.listLoading = true
      // 模拟请求
      const { data } = await fetchList(this.listQuery)
      this.list = data.items
      this.total = data.total
      // this.list = this.menuList
      // this.total = this.menuList.length
      this.listLoading = false
    },
    handleDelete(row, index) {
      this.$confirm(
        i18n.t('common.delete_confirm_tips'),
        i18n.t('common.warm_tips'),
        {
          confirmButtonText: i18n.t('common.confirm'),
          cancelButtonText: i18n.t('common.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          // 这里需请求删除接口...
          // this.list.splice(index, 1)
          this.$message.success(i18n.t('common.deleted'))
        })
        .catch(() => {
          this.$message.info(i18n.t('common.canceled'))
        })
    },
    handleAdd() {
      this.$router.push({ name: 'MenuCreate' })
    },
    // 更新排序
    handleUpdateSort() {
      // 这里需对接排序接口
      const params = arrChildrenFlatten(this.list).map((e) => {
        return { id: e.id, sort: e.sort }
      })
      console.log(params)
      this.$message.success(i18n.t('common.operation_successful'))
    },
    handleEdit(row) {
      this.$router.push({ name: 'MenuEdit', params: { id: row.id }})
    },
    handleModifyStatus(row, status) {
      this.$message.success(i18n.t('common.operation_successful'))
      // 这里需请求删除接口...
      row.status =
        row.status === 'draft' ? 'published' : 'draft'
    },
    // 展开、收起数据处理
    downUpData(data, isExpand) {
      data.forEach((i) => {
        this.$refs.treeTable.toggleRowExpansion(i, isExpand)
        if (i.children) {
          this.downUpData(i.children, isExpand)
        }
      })
    },
    handleArrowDown() {
      // 全部展开
      this.downUpData(this.list, true)
    },
    handleArrowUp() {
      // 全部收起
      this.downUpData(this.list, false)
    }
  }
}
</script>

<style scoped>
</style>
